{include file="common/head"}
<link rel="stylesheet" href="/static/flatpickr/flatpickr.min.css">
<script src="/static/flatpickr/flatpickr.min.js"></script>
<style>
    input {
        display: initial !important;
    }
</style>
</head>

<body>
    <!--startprint-->
    <div class="container-fluid">

        <form action="/wh/wh_query" method="post">
            <div class="row" id="query_bar" style="height: 50px;line-height: 50px;">
                <div class="col-4" style="text-align: left;line-height: 50px;font-size: 2rem;">
                    出入库明细查询
                </div>

                <div class="col">
                    <label for="type">产品:
                        <select id="goods_id" name="goods_id" class="form-control">
                            <option value="">所有</option>
                            {foreach $goods_list as $kv}
                            <option value="{$kv['id']}" {if $goods_id==$kv['id']}selected{/if}>{$kv['name']}</option>
                            {/foreach}
                        </select>
                    </label>
                    <label for="type">规格:
                        <select id="specs_id" name="specs_id" class="form-control">
                            <option value="">所有</option>
                            {foreach $specs_list as $kv}
                            <option value="{$kv['id']}" goods_id="{$kv['goods_id']}" {if
                                $specs_id==$kv['id']}selected{/if} style="display: none;">{$kv['name']}</option>
                            {/foreach}
                        </select>
                    </label>

                    <label for="sdate">日期：</label>
                    <input class="form-control" type="text" value="" id="sdate" name="sdate" placeholder="开始日期" />

                    <label for="sdate"></label>
                    <input class="form-control" type="text" value="" id="edate" name="edate" placeholder="结束日期" />


                    <button type="button" class="btn btn-warning query" style="vertical-align: middle;">
                        <span class="bi-search"></span>
                    </button>
                </div>
            </div>
        </form>

    </div>

    <table class="table  table-hover table-bordered">
        <thead class="table-info">
            <th>序号<br /> sn</th>
            <th>单据</th>
            <th>产品<br /> Name</th>
            <th>规格<br /> Specs</th>
            <th>每件数量</th>
            <th>件数<br /> Pack Qty</th>
            <th> 单前库存</th>
            <th>单据数量<br /> Qty</th>
            <th>单后库存</th>
            <th>备注 Memo</th>
            <th>时间</th>
        </thead>
        <tbody>
            {foreach $list['data'] as $k=>$kv}
            <tr>
                <td>{$k+1}</td>
                <td>{$kv['bill_no']}</td>
                <td>
                    <div>{$kv['goods_id_name']}</div>
                </td>
                <td>{$kv['specs_id_name']}</td>
                <td>{$kv['qty_per_pack']}</td>
                <td>x{$kv['pack_qty']}</td>
                <td>{$kv['before_storage']}</td>
                <td {if $kv['qty']<0}style='color:red;'{else}style='color:blue;'{/if}>{$kv['qty']}</td>
                <td>{$kv['after_storage']}</td>
                <td>{$kv['memo']}</td>
                <td>{$kv['create_time']}</td>
            </tr>
            {/foreach}
            <!-- 
            <tr class="table-infox">
                <td colspan="11"></td>
            </tr> -->
        </tbody>
    </table>
    {include file="common/pagination"}



    </div>
    <!--endprint-->


    <div style="height:50px;text-align: center;color:#999"></div>
</body>

<script type="text/javascript">
    flatpickr("#sdate,#edate", {});
    var current_goods = 0;
    $(document).ready(function () {
        $(".query").on('click', function () {
            var index = layer.load(0, { shade: false }); //0代表加载的风格，支持0-2
            $("form").submit();
            layer.close(index);
        })

        //产品点击处理，显示下面的规格
        $("#goods_id").on('change', function () {
            current_goods = $(this).val();

            $("#specs_id option").hide();
            if (!$("#goods_id").val()) {
                $("#specs_id").val('');
                return false;

            }
            $("#specs_id option").each(function () {

                if ($(this).attr('goods_id') == current_goods) {
                    $(this).show();
                }
            })

        })



    })

    function printpage() {
        let oldStr = window.document.body.innerHTML; // 获取body的内容
        let start = "<!--startprint-->"; // 开始打印标识, 17个字符
        let end = "<!--endprint-->"; // 结束打印标识
        let newStr = oldStr.substr(oldStr.indexOf(start) + 17); // 截取开始打印标识之后的内容
        newStr = newStr.substring(0, newStr.indexOf(end)); // 截取开始打印标识和结束打印标识之间的内容
        window.document.body.innerHTML = newStr; // 把需要打印的指定内容赋给body
        window.print(); // 调用浏览器的打印功能打印指定区域
        window.document.body.innerHTML = oldStr; // body替换为原来的内容
    }
</script>


</body>

</html>